@import '../../node_modules/sweetalert2/dist/sweetalert2.min.css';

@font-face
	font-family 'yuanti'
	src url(/static/css/common/styles/yuanti.ttf)

body
	background-color rgba(245, 245, 245, 1)

#root
	.header
		width 100%
		height 80px
		background-color rgb(42, 42, 42)
		color #fff
		.left
			display inline-block
			height 100%
			padding 20px 32px
			color #fff
			.logo
				width 40px
				height 40px
				vertical-align middle
			.title
				font-size 18px
				font-weight 700
				padding-left 12px
				line-height 40px
		.tab
			display inline-block
			color #fff
			padding-left 64px
			height 100%
			vertical-align middle
			.tab-item
				display inherit
				color #fff
				height 100%
				vertical-align middle
				padding-right 32px
				&:last-of-type
					padding-right 0
				.item
					position relative
					color #fff
					font-size 16px
					line-height 80px
					&:hover
						color #fa3140
		.form-wrapper
			float right
			height 100%
			padding-right 72px
			color #ddd
			.form-item
				padding-top 20px
				color #ddd
				.form-control
					height 100%
					color #ddd
					.input-content
						border 0
						color #ddd
						padding 12px 0 12px 6px
						border-bottom 1px solid #ddd
						background-color transparent
					.submit
						display inline-block
						border 0
						padding-top 12px
						background-color transparent
						.iconfont
							color #ddd
							font-size 16px
		.right
			float right
			height 100%
			display flex
			flex-flow row nowrap
			justify-content center
			align-items center
			.shopcar
				color #ddd
				flex 0 0 100px
				width 100px
				cursor pointer
				&:hover
					color #fa3140
					& > .title
						color #fa3140
				.iconfont
					font-size 24px
					padding-right 12px
					color #ddd
				.title
					color #ddd
			.sign
				flex 1
				padding-left 24px
				color #ddd
				.signin
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				.signup
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				&.loging
					position relative
					.personal-wrapper
						cursor pointer
						padding-right 32px
						&:hover > img
							border 2px solid #fa3140
						img
							border-radius 50%
							border 2px solid transparent
					&:hover .information-wrapper
						visibility visible
						opacity 1
					.information-wrapper
						visibility hidden
						opacity 0
						position absolute
						top 100%
						right 12px
						width 280px
						height 260px
						background-color #fff
						box-shadow -2px 2px 5px #ddd
						z-index 1000
						.first
							width 100%
							.left-wrapper
								display inline-block
								width 40%
								vertical-align top
								box-sizing border-box
								padding 24px
								img
									border-radius 50%
							.right-wrapper
								display inline-block
								.name
									padding 48px 12px
									cursor pointer
									color rgba(42, 42, 42, .6)
									&:hover
										text-decoration underline
						.second
							width 100%
							.block-wrapper
								padding 0 24px
								.shopcar
									color rgba(42, 42, 42, .4)
									display inline-block
									padding 6px 4px
									margin-bottom 8px
									margin-right 8px
									font-weight 500
									font-size 12px
									&:nth-of-type(2n)
										margin-right 0
									background-color rgba(147, 153, 159, .2)
									text-align center
									&:hover
										font-weight 700
										background-color rgba(147, 153, 159, .1)
						.signout
							.out
								float right
								padding-right 24px
								padding-top 12px
								&:hover
									color #ddd
	.vedio-wrapper
		width 100%
		min-height 640px
		.heading
			height 524px
			background-image url(/static/system/vedio-02.png)
			// background-repeat no-repeat
			text-align center
		.heading-wrapper
			position absolute
			top 0
			left 50%
			transform translate3d(-50%, 0, 0)
			text-align center
			.title
				padding-top 224px
				font-size 64px
				height 64px
				line-heihgt 64px
				font-family 'yuanti'
				color rgba(252, 215, 77, .7)
			.instruction
				font-size 16px
				color rgba(252, 215, 77, .7)
				.author
					color #fa3140
					font-size 24px
			.desc
				display flex
				width 300px
				margin 64px auto 0
				justify-content center
				align-items center
				flex-flow row nowrap
				color #999
				.diffculty
					flex 1
					padding 0 12px
					font-size 14px
					line-height 14px
					height 14px
					border-right 1px solid #999
				.total-time
					flex 1
					height 14px
					padding 0 12px
					font-size 14px
					line-height 14px
			.money
				padding-top 32px
				color #fa3140
				font-size 32px
				font-weight bold
			.buy
				display inline-block
				// width 48px
				height 32px
				color #fff
				font-size 16px
				line-height 32px
				padding 12px 24px
				margin-top 32px
				background-color rgb(240, 20, 4)
				cursor pointer
				&:hover
					opacity .8
		.nav-bar
			width 100%
			.nav-list
				display flex
				flex-flow row nowrap
				justify-content center
				align-items center
				width 100%
				height 60px
				.nav-item
					flex 0 0 128px
					width 128px
					font-size 16px
					cursor pointer
					text-align center
					&:hover
						color #fa3140
					&.active
						color #fa3140
		.content-wrapper
			width 100%
			.course-instruction
				text-align center
				.vedio-player-wrapper
					height 540px
					padding 0 20%
					padding-bottom 32px
				.instruction
					width 100%
					height 360px
					background-color rgb(255, 204, 50)
					.title
						font-family 'yuanti'
						font-size 32px
						line-height 32px
						color rgb(42, 42, 42)
						padding 64px
					.desc
						color #000
				.author-instruction
					width 100%
					height 800px
					.title
						font-family 'yuanti'
						font-size 32px
						line-height 32px
						padding-top 64px
						padding-bottom 64px
					.wrapper
						display inline-block
						width 960px
						height 540px
						background-color #fff
						border-radius 24px
						box-shadow 2px 2px 10px #ddd, -2px 0 10px #ddd
						.author-wrapper
							display flex
							flex-flow row nowrap
							.left
								flex 0 0 360px
								width 360px
								img
									margin-top 72px
									border-radius 50%
							.right
								.title
									font-weight 500
									color rgb(255, 205, 50)
									padding 64px 0 32px
								.name
									text-align left
									padding-bottom 32px
								.summary
									text-align left
									text-indent 10%
			.course-study
				width 100%
				.courses-wrapper
					padding 32px 20%
					.title
						text-align left
						font-size 20px
						font-family 'yuanti'
						font-weight 500
						padding 12px 24px
						border-bottom 1px solid #ddd
						margin-bottom 24px
					.courses-list
						.courses
							.course
								width 100%
								padding 12px 24px
								.link-to-child
									display block
									color #999
									font-size 16px
									padding 12px 
									&:hover
										text-decoration underline
									.enter
										float right
										padding-right 34px
			.comment-wrapper
				padding 12px 20%
				min-height 72px
				text-align center
				.title
					text-align left
					font-size 18px
					padding 24px
					border-bottom 1px solid #ddd
				.comments-wrapper
					min-height 30px
					.comment
						padding 12px
						border-bottom 1px solid #ddd
						margin-bottom 24px
						.wrapper
							text-align left
							padding 24px
							.time-wrapper
								text-align left
								padding 24px
							
			.submit-comment
				text-align left
				padding-left 72px
				textarea
					border 0
					padding 12px
					font-size 16px
					border-radius 12px
					box-shadow 2px 2px 10px #ddd, -2px 0 10px #ddd
				button
					display inline-block
					color #fff
					border 0
					font-size 16px
					margin-left 32px
					line-height 24px
					padding 12px 24px
					border-radius 6px
					background-color #fa3140
					&:hover
						opacity .8
	.footer
		width 100%
		min-height 150px
		background-color rgb(42, 42, 42)
		.footer-wrapper
			padding 32px 300px
			text-align center
			.first-line
				padding 12px
				.iconfont
					color #ddd
					font-size 32px
					&:hover
						color #fa3140
			.second-line
				font-size 16px
				font-weight 700
				padding 12px 0
				border-bottom 1px solid #666
				a
					color #ddd
					padding-left 24px
					padding-right 24px
					border-right 1px solid #ddd
					&:last-of-type
						border-right 0
				& > a:hover
					color #fa3140
			.last-line
				padding 12px 0 0 0
				color #ddd
				font-size 12px
				font-weight normal
	.to-top
		position fixed
		bottom 180px
		right 0
		width 32px
		height 32px
		padding 12px
		background-color #fff
		cursor pointer
		box-shadow -5px 5px 10px #ddd
		.iconfont
			font-size 32px
			color #999
